a
<template>
  <div class="app-container">
    <div slot="header" class="back">
      <router-link :to="{name: 'tools-list'}">
        <el-button plain icon="el-icon-back" size="small" :round="true">
          返回
        </el-button>
      </router-link>
    </div>
    <div class="container">
      <div class="container-content">
        <img src="../../assets/images/fk.png">
        <div class="content">
          <div class="container_top">
            <span class="container_title">TikTok Multi Pixels</span>
          </div>
          <div style="color:#7e849c;font-size:14px">TikTok作为全球最热门短视频APP，处于商业化广告红利期，这款应用插件通过深度技术打通数据跟踪，增强广告投放效果 </div>
        </div>
      </div>
      <el-button type="primary"  @click="pixelVisible = true" style="width: 220px;height: 42px;flex: 0">添加TikTok PIxel</el-button>
    </div>
<!--    <el-form ref="form" :inline="true" :model="dataTracking" :rules="rules" size="small">
      <el-form-item label="" prop="bindValue">
        <el-input v-model="dataTracking.bindValue" placeholder="输入Pixel" style="width: 260px"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-select v-model="dataTracking.seriesId" @change="setBindType" style="width: 260px">
          <el-option :value="null" label="全局"></el-option>
          <el-option
              v-for="item in series"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="handleAddDataTracking">添加</el-button>
      </el-form-item>
    </el-form>-->
    <table-pagination
        ref="el-search-table"
        :showOperatingButton="false"
        :columns="columns"
        :fetch="getData"
        :form-options="formOptions"
        :page-sizes="[20, 50, 100]"
        list-field="records"
        method="get"
        page-index-key="page"
        page-size-key="pageSize"
        total-field="totalElements"
        type="remote">
        <template slot-scope="scope" slot="status">
         <el-switch v-model="scope.row.isEnabled" active-value="0" @change="handleSpuPublish($event, scope.row.id)"></el-switch>
        </template>

      <el-table-column slot="append" label="操作" width="300px">
        <template slot-scope="scope">
          <el-button plain size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button plain size="mini" type="danger" @click="handleDelDataTracking(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </table-pagination>
    <el-dialog :title="isEdit ? '编辑TikTok Pixel' : '添加TikTok Pixel'" :visible.sync="pixelVisible" width="600px" center @close="handleRestForm('pixelForm')">
      <el-form ref="pixelForm" :model="pixelConfig">
        <el-form-item label="标题" prop="pixelTitile">
          <el-input type="text" v-model="pixelConfig.pixelTitile" placeholder="请输入标题"/>
        </el-form-item>
        <el-form-item label="Pixel Id" prop="pixelId">
          <el-input type="text" v-model="pixelConfig.pixelId" placeholder="请输入pixelId"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="pixelVisible = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="handleSubmit('pixelForm')">确 定</el-button>
    </span>
    </el-dialog>
<!--    <div class="footer">
      <div><span style="color:red">*</span>使用须知：</div>
      <div>1.在使用本插件的同时，请确保不要同时使用其它 Facebook pixel 数据追踪插件，否则可能收到重复的、不准确的数据报告</div>
      <div>2.全局类的 Pixel 支持上报主页及全部子页面的数据，数量限制为 4 个；关联商品专辑的 Pixel 支持上报专辑页及子页面的数据，数量限制为 8 个</div>
    </div>-->
  </div>
</template>

<script>
import TablePagination from '_c/Tables/table-pagination';
import {
    getTiktokPixel, updateTiktokPixel, addTiktokPixel, delTiktokPixel,
    getAppDataTrackingById, updateAppDataTracking, updateTiktokPixelStatus
} from '@/api/app-market';

export default {
    name: 'data-tracking-fb',
    components: {TablePagination},
    data () {
        return {
            isEdit: false,
            dataTrackType: 'FB',
            pixelVisible: false,
            fixOption: {fixedHeader: true},
            pixelConfig: {
                pixelTitile: '',
                pixelId: ''
            },
            formParams: {
                name: '',
                couponCode: '',
                marketingType: '',
                status: ''
            },
            rules: {
                pixelTitile: [
                    {required: true, message: '请输入标题', trigger: 'blur'}
                ],
                pixelId: [
                    {required: true, message: '请输入Pixel ID', trigger: 'blur'}
                ]
            },
            submitLoading: false,
            pageParams: {
                page: 1,
                pageSize: 20
            },
            series: [],
            formOptions: {
                showResetBtn: false,
                showSearchBtn: false,
                inline: true,
                submitBtnText: '添加',
                size: 'small',
                resetBtnCallback: () => {
                    this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
                },
                forms: []
            },
            columns: [
                {label: 'Pixel 标题', prop: 'pixelTitile'},
                {label: 'Pixel ID', prop: 'pixelId'},
                {label: '状态', slotName: 'status'}
            ]
        };
    },
    methods: {
        handleSearch () {
            this.formParams.siteId = this.siteId;
            this.$refs['el-search-table'].fetchHandler(this.pageParams, false);
        },
        handleDelDataTracking (id) {
            this.$confirm('此操作将永久删除该 Pixel ID, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.listLoading = true;
                delTiktokPixel(id, this.siteId).then(res => {
                    if (res.code === '200') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.$refs['el-search-table'].searchHandler(true);
                    } else {
                        this.$message({type: 'error', message: '删除出错'});
                    }
                });
            }).catch(() => {
            });
        },
        handleSpuPublish (status, id) {
            updateTiktokPixelStatus(id).then(res => {
                this.marketing = {
                    delayTime: 30 * 1000
                };
                this.$message.success('设置成功');
                this.$refs['el-search-table'].searchHandler(true);
            });
        },
        getData () {
            return new Promise((resolve, reject) => {
                getTiktokPixel({...this.pageParams, siteId: this.siteId}).then((res) => {
                    if (res.code === '200') {
                        resolve(res.data);
                    }
                });
            });
        },
        handleEdit (row) {
            this.pixelConfig = row;
            this.pixelVisible = true;
            this.isEdit = true;
        },
        handleRestForm (name) {
            this.isEdit = false;
            this.$refs[name].resetFields();
            this.pixelConfig = {
                pixelTitile: '',
                pixelId: ''
            };
        },
        handleSubmit (name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    if (this.isEdit) {
                        updateTiktokPixel({siteId: this.siteId, ...this.pixelConfig}).then(res => {
                            this.isEdit = false;
                            this.pixelVisible = false;
                            this.$message.success('修改成功');
                            this.$refs['el-search-table'].searchHandler(true);
                        });
                    } else {
                        addTiktokPixel({siteId: this.siteId, ...this.pixelConfig}).then(res => {
                            this.isEdit = false;
                            this.pixelVisible = false;
                            this.$message.success('新增成功');
                            this.$refs['el-search-table'].searchHandler(true);
                        });
                    }
                }
            });
        }
    },
    mounted () {
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    }
};
</script>

<style lang="scss" scoped>
.search-list {
  h4 {
    border-bottom: 1px solid #E8E8E8;
    margin: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}

.container {
  margin: 30px 0 40px 40px;
  padding: 0 0 0 40px;
  display: flex;
  justify-content: space-between;
}

.back {
  margin: 20px;
}

.container-content {
  display: flex;
  flex-direction: row;
}

.container-content img {
  height: 80px;
}

.container_top {
  margin-bottom: 10px;
}

.content {
  display: flex;
  flex-direction: column;
  line-height: 30px;
  margin-left: 20px;
}

.container_title {
  font-size: 22px;
  color: #30344f;
  font-weight: 500;
}

.setting {
  padding: 0 15px;
  color: blue;
}

.footer {
  margin: 30px 0 40px 10px;
  padding: 0 0 0 5px;
  font-size: 14px;
  color: #666;
  line-height: 30px;
}
</style>
